<template>
  <div class="edit">
      <div style="margin-bottom:10px">
          <nav-bar></nav-bar>
      </div>
      <div class="uploadfile">
        <van-uploader class="uploadimg" :after-read="afterRead" preview-size="100vw"/>
        <edit-banner left="头像">
            <img v-if="model.user_img" :src="model.user_img" alt="" slot="right">
            <img v-else src="@/assets/img/user.jpg" alt="" slot="right">
        </edit-banner>
      </div>
      <edit-banner left="昵称" @bannerClick="show = true" @cancel="text =''">
          <a href="javascript:;" slot="right">{{model.name}}</a>
      </edit-banner>
      <edit-banner left="账号">
          <a href="javascript:;" slot="right">{{model.username}}</a>
      </edit-banner>
      <edit-banner left="性别" @bannerClick="gendershow = true">
          <a href="javascript:;" slot="right">{{model.gender === 1 ? '男':'女'}}</a>
      </edit-banner>
      <edit-banner left="个签" @bannerClick="contentshow = true">
        <a href="javascript:;" slot="right">{{model.user_desc}}</a>
      </edit-banner>

      <van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmClick">
        <van-field v-model="text"  autofocus />
      </van-dialog>

      <van-dialog v-model="contentshow" title="个签" show-cancel-button @confirm="textareaClick" @cancel="text =''">
        <van-field v-model="text"  type="textarea" autofocus />
      </van-dialog>

      <div class="editback" @click="$router.back()">返回个人中心</div>

      <van-action-sheet  cancel-text="取消" v-model="gendershow" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import NavBar from '@/components/common/Navbar'
import EditBanner from '@/components/common/editBanner'
export default {
    data () {
        return {
            model: {},
            show:false,
            text:'',
            contentshow:false,
            gendershow:false,
            actions: [{ name: '男',val:1 }, { name: '女',val:0 }],
        }
    },
    components: {
        NavBar,
        EditBanner
    },
    methods: {
        async selectUser () {
            const res = await this.$http.get('/user/'+ localStorage.getItem('id'))
            this.model = res.data[0]
        },
        async afterRead (file) {
            const fromdata = new FormData()
            fromdata.append('file',file.file)
            const res = await this.$http.post('/upload',fromdata)
            this.model.user_img = res.data.url
            this.Userupdata()

        },
        async Userupdata () {
            const res = await this.$http.post('/update/' + localStorage.getItem('id'),this.model)
            if(res.data.code == 200) {
                this.$msg.fail('修改成功')
            }
        },
        confirmClick () {
            this.model.name = this.text 
            this.Userupdata()
            this.text = ''
        },
        textareaClick () {
            this.model.user_desc = this.text
            this.Userupdata()
            this.text = ''
        },
        onSelect (data) {
            this.model.gender = data.val
            this.Userupdata()
            this.gendershow = false
        }
    },
    created () {
        this.selectUser()
    }
}
</script>

<style lang="stylus" scoped>
  .edit
    img 
      width 12.7778vw
      height 12.7778vw
      border-radius 13.8889vw
    a
      color #333
    .uploadfile
      position relative
      overflow hidden
      .uploadimg
        opacity 0
        position absolute
    .editback
      background-color white
      display flex
      align-items center
      justify-content center
      color #999
      font-size 4.7222vw
      padding 4.1667vw 0
      margin-top 5.5556vw 

        
      
</style>